/**
 * 视频外部配置
 * @param {*} parentDomName 视频dom父元素名
 * @returns 视频初始化配置对象
 */
this.videoConfig = function (parentDomName) {
	const constraints = {
		video: { // 视频框宽高配置 默认按照4:3比例展示，以宽为基准
			width: 0,
			height: 0,
			facingMode: 'user' // 优先使用前置摄像头
		},
		audio: false, // 音频开关
		video: true // 视频开关
	};
	
	constraints.video.width = parentDom.offsetWidth
	constraints.video.height = parentDom.offsetHeight
	return constraints
}
/**
 * 获取浏览器媒体兼容性写法
 * @param {*} videoConfig 视频参数配置
 * @param {*} success 成功回调事件
 * @param {*} error 失败回调事件
 */
this.compatibleMedia = function(videoConfig, success, error) {
	if (navigator.mediaDevices.getUserMedia){
		// 最新标准API
		navigator.mediaDevices.getUserMedia(videoConfig).then(success).catch(error);
	} else if (navigator.webkitGetUserMedia){
		// webkit内核浏览器
		navigator.webkitGetUserMedia(videoConfig).then(success).catch(error);
	} else if (navigator.mozGetUserMedia){
		// Firefox浏览器
		navagator.mozGetUserMedia(videoConfig).then(success).catch(error);
	} else if (navigator.getUserMedia){
		// 旧版API
		navigator.getUserMedia(videoConfig).then(success).catch(error);
	}
}
/**
 * 生成video canvas底图
 */
this.generateVideoCanvas = function(video) {
	this.clearCanvas() // 清除canvas
	const ctx = canvas.getContext('2d')
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
}
/**
 * 清除canvas绘制区域
 */
this.clearCanvas = () => {
	const ctx = canvas.getContext('2d')
	ctx.clearRect(0, 0, canvas.width, canvas.height)
}
	/**
 * 成功的回调函数
 * @param {*} MediaStream 视频流
 */
this.successCallback = function(MediaStream){
	// 获得video对象
	const video = document.querySelector('#video');
	// MediaStream.getTracks() 返回的Tracks数组是按视频参数配置倒序排列
	MediaStreamTrack = typeof MediaStream.stop ==='function' ? MediaStream : MediaStream.getTracks()[0];
	video.srcObject = MediaStream
	// 播放视频
	video.play();
	const cameraIcon = document.querySelector('#camera-icon')
	cameraIcon.style.display = 'block'
	// 当点击拍照按钮时，获取当前图片canvas的base64数据
	cameraIcon.addEventListener('click', () => {
		this.generateVideoCanvas(video)
	})
}
//异常的回调函数
this.errorCallback = function(error) {
	console.log("访问用户媒体设备失败：", error.name, error.message);
}
/**
 *  系统媒体获取
 * @param {*} videoConfig 视频外部配置对象
 */
this.getMedia = function(videoConfig) {
	if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
		// 调用用户媒体设备，访问摄像头
		this.compatibleMedia(videoConfig, this.successCallback, this.errorCallback);
	} else {
		console.log("你的浏览器不支持访问用户媒体设备");
	}
}